<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>订单详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		.mui-table-view .mui-media-object {
			width: 28px;
			height: 18px;
			line-height: 18px;
			font-size: 14px;
		}
		.mui-table-view .mui-media-object.mui-pull-left {
			margin-right: 16px;
		}
		.order-name {
			color: #4C4C4C;
		}
		.order-price {
			color: #FF4D4D;
		}
		.mui-input-group .mui-input-row {
			height: 50px;
		}
		.mui-input-row label {
			padding: 0 0 0 25px;
			line-height: 50px;
			color: #999;
		}
		.mui-input-row label~input {
			margin-top: 4px;
			color: #333;
		}
		.mui-input-row label~input::-webkit-input-placeholder {
			color: #999;
		}
		.mui-input-row label,label~input {
			font-family: 'PingFangSC-Regular';
		    font-size: 14px;
		}
		.mui-bar-tab {
			height: 47px;
		}
		.mui-bar .mui-btn-block {
			top: 0;
			padding: 11px 0;
		}
	 	.mui-btn-primary {
	 		border: 1px solid #5BA9F9;
    			background-color: #5BA9F9;
	 	}
	 	#pay-nav {
	 		display: none;
	 	}
	</style>
</head>
<body>
	<div class="mui-content">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;" class="">
					<img class="mui-media-object mui-pull-left" src="../img/index/shuijiao.jpg">
					<div class="mui-media-body">
						<div class="space-between">
							<span class="order-name"></span><span class="order-price"></span>
						</div>
					</div>
				</a>
			</li>
		</ul>		
		<form class="mui-input-group" style="margin-top: 10px;">
			<div class="mui-input-row">
				<label id="userName" style="color: #333;"></label>
				<input id="professionType" type="text" readonly="readonly" >
			</div>
			<div class="mui-input-row">
				<label>联系电话</label>
				<input id="phone" type="text" readonly="readonly" >
			</div>
			<div class="mui-input-row">
				<label>电子邮箱</label>
				<input id="email" type="text" readonly="readonly" >
			</div>
			<div class="mui-input-row">
				<label>邮寄地址</label>
				<input id="address" type="text" readonly="readonly" >
				<input id="addressId" type="hidden" type="text" readonly="readonly" >
			</div>
		</form>	
		<form class="mui-input-group" style="margin-top: 10px;">
			<div class="mui-input-row">
				<label>订单编号</label>
				<input id="orderNo" type="text" readonly="readonly" >
			</div>
			<div class="mui-input-row">
				<label>订单状态</label>
				<input id="payStatus" type="text" style="color: #FF4C4C;" readonly="readonly" >
			</div>
			<div class="mui-input-row">
				<label>下单时间</label>
				<input id="createTime" type="text" readonly="readonly" >
			</div>
			<div class="mui-input-row">
				<label>签证结果</label>
				<input id="results" type="text" readonly="readonly" >
			</div>
			<div class="mui-input-row">
				<label>用户自领</label>
				<input id="isInvite" type="text" readonly="readonly" >
			</div>
			<div class="mui-input-row">
				<label>快递单号</label>
				<input id="expressNum" type="text" readonly="readonly" >
			</div>
		</form>	
		<nav id="pay-nav" class="mui-bar mui-bar-tab">
			<button type="button" class="mui-btn mui-btn-primary mui-btn-block">立即支付</button>
		</nav>
	</div>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var customerId = base.getParameter("customerId");
		var orderNo = base.getParameter("orderNo");
		$(function() {
			base.setWait('正在获取数据');
			var params = {
				customerId: customerId,
				orderNo: orderNo
			}
			base.postData(base.url.getOrderInfo, params, getOrderInfoSuccess)
		})
		function getOrderInfoSuccess(data) {
			if(data.success) {
				//初始化微信 用于支付
				base.initWX(function () {});
				$('.order-name').text(data.extendData.goodsName);
				$('.order-price').text('￥'+data.extendData.price);
				$('#userName').text(data.extendData.userName);
				$('#professionType').val(data.extendData.professionType);
				$('#phone').val(data.extendData.phone);
				$('#email').val(data.extendData.email);
				$('#address').val(data.extendData.address);
				$('#orderNo').val(data.extendData.orderNo);
				$('#payStatus').val(data.extendData.payStatus);
				$('#createTime').val(data.extendData.createTime);
				$('#results').val(data.extendData.results);
				$('#expressNum').val(data.extendData.expressNum);
				$('#isInvite').val(data.extendData.isInvite);
				$('#addressId').val(data.extendData.addressId);
				if(data.extendData.isPay ==2) {
					$('#pay-nav').show();
				}
			} else {
				mui.toast(data.message);
			}
		}
		$('#pay-nav').on('tap', 'button', function(e) {
			var isWechat = base.isOnWx();
			var params = {
               orderNo: orderNo,
               customerId: customerId,
               addressId: $('#addressId').val()
           	}
			if (isWechat) {
				base.weChatPay(params, function(rse) {
					//支付成功
					mui.toast('支付成功');
					setTimeout(function() {
						window.location.href='index.html?customerId='+customerId+'&fromType=1';
					}, 1000)
				}, function() {
					//取消支付
				}, function() {
					//支付失败
					mui.toast('支付失败，请稍后再试！')
				});
			} else {
				base.postData(base.url.perpayH5,params,function(data) {
					var cfg = data.extendData;
					if (data.success) {
						if(data.extendData.mweb_url) {
							var urlPath = root_host+'ry_visa_web/pages/index.html?customerId='+customerId+'&fromType=1';
							window.location.href = data.extendData.mweb_url+'&redirect_url='+encodeURIComponent(urlPath);
						}
					} else {
						mui.toast(data.message);
					}
				});
			}
		})
	</script>
</body>
</html>
